<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>服务日志</title>
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <!--<link href="{$Think.config.RESOURCEURL}wx_assets/service/css/services.css{$Think.config.RESOURCE_VER}" rel="stylesheet">-->
    <script src="{$Think.config.RESOURCEURL}wx_assets/personCenter/js/mediaQuery.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type='text/javascript' src='{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}'></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <style>
        .rDialog-wrap {
            font-size: .36rem;
        }
        body {
            background-color: #f1f0f8;
        }
        .data-loading,.data-end{
            font-size:16px;
        }
        div.top {
            background-color: #fff;
            border-bottom: 1px solid #ccc;
        }
        div.menu {
            display: inline-block;
            width: 50%;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            height: .5rem;
            margin: .2rem 0;
            line-height: .5rem;
            font-size: .3rem;
            padding-left: 1rem;
            background:#fff url({$Think.config.RESOURCEURL}wx_assets/service/images/day_d.png) 80% center no-repeat;
            background-size: .15rem .12rem;
            float: left;
            color: #363535;
        }
        div.menu > span {
            display: inline-block;
            width: 100%;
        }
        div.menu:first-child {
            border-right: 1px solid #ccc;
        }
        div.menu.up {
            background:#fff url({$Think.config.RESOURCEURL}wx_assets/service/images/day_up.png) 80% center no-repeat;
            background-size: .15rem .12rem;
        }
        div.menu.current {
            color: #f75493;
            background:#fff url({$Think.config.RESOURCEURL}wx_assets/service/images/day_down.png) 80% center no-repeat;
            background-size: .15rem .12rem;
        }
        div.menu.current.up {
            color: #f75493;
            background:#fff url({$Think.config.RESOURCEURL}wx_assets/service/images/day_up.png) 80% center no-repeat;
            background-size: .15rem .12rem;
        }
        .noMassage{
            text-align: center;
            font-size: .3rem;
            line-height: 1rem;
            color:#919191;
        }
        ul.options {
            width: 100%;
            left: 0;
            position: absolute;
            top: .91rem;
            z-index: 3;
            overflow: hidden;
            -webkit-transition: height 0.6s;
            transition: height 0.6s;
            height:0;
        }
        ul.options li {
            height: .86rem;
            line-height: .86rem;
            font-size: .3rem;
            color: #757575;
            background-color: #fff;
            padding-left: .3rem;
            border-bottom: 1px solid #dddddd;
            padding-left: 1rem;
            text-align: left;
        }
        ul.options li.current {
            color: #f75493;
            background: #fff url({$Think.config.RESOURCEURL}wx_assets/service/images/day_duigou.png) 96% center no-repeat;
            background-size: .28rem .2rem;
        }
        ul.list {
            margin-top: .2rem;
        }
        ul.list > li {
            padding: .2rem;
            border-bottom: 1px solid #dddddd;
            background-color:#fff;
        }
        ul.list li .head {
            width: 1rem;
            overflow: hidden;
            display: inline-block;
            float: left;
        }
        ul.list li .head img {
            width: 100%;
        }
        ul.list li .con {
            margin-left: .2rem;
            width: 4.6rem;
            overflow: hidden;
            display: inline-block;
            float: left;
        }
        ul.list li .con p {
            font-size: .28rem;
            color: #040404;
        }
        ul.list li .con .imgs {
            width: 100%;
        }
        ul.list li .con .imgs li {
            width: 30%;
            overflow: hidden;
            display: inline-block;
            position: relative;
            height: 1.5rem;
            margin-top: .15rem;
            float: left;
            margin-right: .1rem;
        }
        ul.list li .con .imgs li img {
            width: 100%;
        }
        ul.list li .con span {
            display: block;
            font-size: .24rem;
            color: #646a84;
        }
        ul.list li .con span.name {
            font-size: .28rem;
        }
        ul.list li .con p.time {
            font-size: .24rem;
            color: #909090;
            margin-top: .1rem;
        }
        ul.list li .con p.time span{
            color:#919191;
            float:left;
        }
        ul.list li .con p.time a {
            display: inline-block;
            margin-left: .3rem;
            color: #646a84;
        }
        .mask {
            position: absolute;
            top: .91rem;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            background-color: rgba(0, 0, 0, .5);
            display: none;
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div class="top clearfix">
    <div class="menu current">
        <span>服务类别</span>
        <ul class="options" id="type">
            <li data-id="">所有</li>
            <volist name="type" id="types">
                <li data-id="{$types.id}">{$types.name}</li>
            </volist>
        </ul>
    </div>
    <div class="menu">
        <span>服务对象</span>
        <ul class="options" id="division">
            <li data-id="">所有</li>
			<li data-id="all">所有人</li>
            <volist name="division" id="divisions">
                <li data-id="{$divisions.id}">{$divisions.name}</li>
            </volist>
        </ul>
    </div>
</div>
<ul class="list" id="days">

</ul>
</body>
<script type="text/html" id="Tpl">
    <%if(list){%>
    <%for(var i=0;i<list.length;i++){
    var day = list[i];
    %>
    <li class="clearfix" onclick="days.toDetail(<%=day.id%>)">
        <div class="head">
            <img src="<%=day.headimgurl%>" alt="">
        </div>
        <div class="con">
            <span class="name"><%=day.nickname%></span>
            <p><%=day.content%></p>
            <%if(day.image){
            var image = day.image;%>
            <ul class="imgs clearfix">
                <%for(var j=0;j<image.length;j++){
                var imgUrl = image[j];
                %>
                <li>
                    <img onclick="days.showImgs(this)" data-url="<%=imgUrl%>" src="<%=imgUrl%>@100w_100h_1e_1c_100sh" alt="">
                </li>
                <%}%>
            </ul>
            <%}%>
            <span style="float:left;margin-right:5px;"><%=day.divisionName%></span><span><%=day.typeName%></span>
            <p class="time">
                <span><%=day.createTime%></span>
                <%if(day.canDel==1){%>
                    <a onclick="days._delMessage(<%=day.id%>,this)">删除</a>
                <%}%>
            </p>
        </div>
    </li>
    <%}}else{%>
    <div class="noMassage">暂无服务</div>
    <%}%>
</script>
<script>
    var baseUrl = '{$Think.config.SERVER_HOST}';
    var url = "{$Think.config.SERVER_HOST}call.json?customerId={$customerId}";
    var days={
        pageSize:10,
        page:0,
        pageCount:0,
        init:function(){
            var me=this;
            this._initEvent();
            $.util.pageLoading.show();
            me._loadList(me.page,function(){
                $.util.pageLoading.hide();
            });
        },
        _initEvent:function(){
            var me=this;
            $.util.initDataLoading({
                me:days,
                lastChildren:function(){
                    return $("#days .clearfix:last");
                },
                page:function(){
                    return days.page;
                },
                pageCount:function(){
                    return days.pageCount;
                }
            });
            $("div.menu").click(function(){
                var ulHeight = $(this).find("ul");
                if(ulHeight.height()){
                    ulHeight.height(0);
                }else{
                    ulHeight.css("height","auto");
                }
                $(this).addClass("current").siblings(".current").removeClass("current");
                if($(this).hasClass("up")){
                    $(".mask").hide();
                }else{
                    $(".mask").show();
                }
                $(this).toggleClass("up");
                $(this).siblings(".up").removeClass("up").find("ul").height(0);
            });
            $("ul.options li").click(function(event){
                event.stopPropagation();
                $(this).addClass("current").siblings(".current").removeClass("current");
                $(".mask").fadeOut();
                $(this).parent("ul").prev().text($(this).text());
                $("div.menu").removeClass("up");
                $(this).parent().height(0);
                days.page=0;
                var id = $(this).data("id");
                $.util.pageLoading.show("正在查询...");
                me._loadList(me.page,function(){
                    $.util.pageLoading.hide();
                });
            });

        },
        showImgs:function(ctl){
            window.event.stopPropagation();
            var imgs = new Array(0);
            $(ctl).parents("ul.imgs").find("li").each(function(){
                imgs.push($(this).find("img").data("url"));
            });
            var thisImg = $(ctl).data("url");
            wx_share.showImg(imgs,thisImg);
        },
        _renderList:function(data,page,callback){
            var me=this;
            if(data){
                var html=template("Tpl", data),
                        container = $("#days");
                if(page==0){
                    $(".data-end").hide();
                    $(".data-loading").hide();
                    container.html(html);
                }else{
                    container.append(html);
                }
                me.page=page+days.pageSize;
                me.pageCount=data.total;
                callback && callback();
            }
        },
        _loadList:function(page,callback){
            var me=this;
            var typeId=$("#type li.current").data("id");
            var divisionId=$("#division li.current").data("id");
            var data={
                "typeId":typeId,
                "divisionId":divisionId,
                "start":days.page,
                "limit":days.pageSize
            };
            $.ajax({
                type: 'post',
                url: url,
                dataType: 'json',
                data:{
                    'module':"services",
                    "method":"servicesMessageList",
                    "params":JSON.stringify(data)
                },
                success: function(data){
                    if(data){
                        me._renderList(data,page,callback);
                    }
                    $.util.pageLoading.hide();
                },
                error: function(xhr, type){
//            alert('Ajax error!')
                }
            })
        },
        _delMessage:function(id,ctrl){
            window.event.stopPropagation();
            var me = $(ctrl).parents("li");
            $.util.ok("确定要删除吗？",function(){
                $.req.get("call.json?customerId={$customerId}&module=services&method=delServicesMassage",{
                    params:{
                        "id":id
                    }
                },function(data){
                    if(data && !data.code){
                        me.remove();
                    }
                });
            });

        },
        toDetail:function(id){
            var params = {"id":id};
            params=encodeURIComponent(JSON.stringify(params));
            location.href= baseUrl+'call.html?customerId={$customerId}&module=services&method=servicesDetail&params='+params;
        }
    }
    days.init();
</script>
<script>
    wx_share.init({
        "pkg":{
            "appId": '{$pkg.appId}',
            "timestamp": '{$pkg.timestamp}',
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        },
        hide:1
    });
</script>
</html>